<template>
	<div id="information">
		<p class="Title">个人资料</p>
		<div class="information_title">
			<span>1</span>
			<p>个人信息</p>
		</div>
		<div class="information_1">
			<div class="information_item">
				<p>商家ID：</p>
				<input type="text" readonly="readonly" v-model="information.id" />
			</div>
			<div class="information_item">
				<p>昵称：</p>
				<input type="text" v-model="information.nickName" placeholder="请填写昵称" @keyup="isfocus = 0" :class="isfocus == '1'?'focus':''"/>
			</div>
			<div class="information_item">
				<p>真实姓名：</p>
				<input type="text" v-model="information.realName" placeholder="请填写真实姓名" @keyup="isfocus = 0" :class="isfocus == '2'?'focus':''"/>
			</div>
		</div>
		<div class="information_title">
			<span>2</span>
			<p>联系方式</p>
		</div>
		<div class="information_2">
			<div class="information_item">
				<p>手机号码：</p>
				<input type="text" readonly="readonly" v-model="information.phone" />
			</div>
			<div class="information_item">
				<p>QQ：</p>
				<input type="text" v-model="information.qq" placeholder="请填写QQ号"  @keyup="isfocus = 0" :class="isfocus == '3'?'focus':''"/>
			</div>
			<div class="information_item">
				<p>微信号：</p>
				<input type="text" v-model="information.wechat" placeholder="请填写微信号" @keyup="isfocus = 0" :class="isfocus == '4'?'focus':''"/>
			</div>
			<div class="information_item">
				<p>电子邮箱：</p>
				<input type="text" v-model="information.email" placeholder="请填写电子邮箱" @keyup="isfocus = 0" :class="isfocus == '5'?'focus':''"/>
			</div>
		</div>
		<input type="button" @click="updateInfo"value="保存" />
	</div>
</template>

<script>
export default {
	name: 'information',
	data:function(){
		return{
			isfocus:0,
			information: {
				id: '',//商家ID
				nickName: '',//昵称
				realName: '',//真实姓名
				phone: '',//手机号码
				qq: '',//QQ
				wechat: '',//微信号
				email: '',//电子邮箱
			}
		}
	},
	methods:{
		//-----------搜索---------------
		search:function(){
			var _this = this;
			_this.$axios.post('/agent/info/show',).then(function(res){
			    if(res.data.message=='succ'){
			    	_this.information = res.data.result;
			    }
			}).catch(function (error) {
			    console.log(error);
			});
		},
		updateInfo:function(){
			var _this = this;
			if(!$.trim(_this.information.nickName)){
				_this.isfocus=1;
			}else if(!$.trim(_this.information.realName)){
				_this.isfocus=2;
			}else if(!$.trim(_this.information.qq)){
				_this.isfocus=3;
			}else if(!$.trim(_this.information.wechat)){
				_this.isfocus=4;
			}else if(!$.trim(_this.information.email)){
				_this.isfocus=5;
			}else{
				var postData = _this.$qs.stringify({
		        	nickName:_this.information.nickName,
		        	qq:_this.information.qq,
		        	wechat:_this.information.wechat,
		        	realName:_this.information.realName,
		        	email:_this.information.email,
		        });
				_this.$axios.post('/agent/info/updateInfo',postData).then(function(res){
					console.log(res.data.result.id)
				    if(res.data.message=='succ'){
				    	_this.$alert("1","修改成功");
				    	_this.$parent.info();
				    }else{
				    	_this.$alert("2","修改失败");
				    }
				}).catch(function (error) {
				    console.log(error);
	
				});
			}
		}
	},
	created:function(){
		this.search();
	},
}
</script>

<style scoped>
#information{
	width: 1030px;
	background-color: #fff;
	padding: 30px;
	padding-bottom: 10px;
	box-sizing: border-box;
}
.Title{
	font-size: 20px;
	color: #545454;
}
.information_title{
	display: flex;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid #E6E6E6;
	font-size: 16px;
	margin-top: 15px;
}
.information_title span{
	height: 16px;
	width: 16px;
	background-color: #545454;
	border-radius: 50%;
	color: #FFFFFF;
	text-align: center;
	line-height: 16px;
	font-size: 12px;
	margin-right: 10px;
}
.information_1,.information_2{
	padding-left: 24px;
}
.information_item{
	display: flex;
	align-items: center;
	margin-top: 20px;
}
.information_item p{
	color: #545454;
	width: 72px;
}
.information_item input{
	height: 30px;
	width: 200px;
	border: 1px solid #E6E6E6;
	padding-left: 10px;
	box-sizing: border-box;
}
input[type="button"]{
	background-color: #FF464E;
	color: #FFFFFF;
	width: 100px;
	height: 30px;
	border: none;
	margin-left: 96px;
	margin-top: 30px;
}
input.focus{
	border: 1px solid #FF464E;
}
</style>